<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>机构列表</title>
    <div th:replace="common/publicJs::common_header"></div>
    <!--    thymeleaf框架的 html中，script需要加th:inline="none" -->
    <script type="text/javascript" th:inline="none">

        // 存储机构树被选中的节点
        var selecedNode;

        $(function () {
            //加载左侧机构树
            $('#left_org_tree').tree({
                url: ctx + 'sys/org/all',
                id: 'id',
                textField: 'name',
                parentField: 'parentId',
                lines: true,
                //菜单打开与关闭是否有动画效果
                animate: true,
                onClick: function (node) {
                    if (node !== selecedNode) {
                        selecedNode = node;
                        $('#datagrid').datagrid('load', {
                            orgId: selecedNode.id,
                        });
                    } else {
                        selecedNode = null;
                        $('#datagrid').datagrid('load', {});
                    }
                }
            })
            //加载机构表格
            $('#datagrid').datagrid({
                url: ctx + 'sys/user/dataList',
                fitColumns: true,
                striped: true,
                idField: 'id',
                treeField:'name',
                parentField: 'parentId',
                iconCls:'iconClass',
                pagination: true,
                lines: true,
                //菜单打开与关闭是否有动画效果
                animate: true,
                rownumbers: true,
                // singleSelect:true,
                pageList: [3, 10, 50, 100, 500],
                //远程排序,实现方式是重新发请求，但不会发送排序字段，只是前端排序,功能有点鸡肋。
                remoteSort: false,
                columns: [[
                    {field: 'checkbox', checkbox: true},
                    {field: 'id', hidden: true, width: 50, align: "center"},
                    {field: 'name', title: '名字', width: 60, align: "center", sortable: true},
                    {field: 'loginName', title: '登录名', width: 60,align: "center"},
                    {field: 'sex', title: '性别', width: 40,align: "center",
                        formatter:function (value,row,index) {
                            if (value === 0){
                                return "女";
                            }
                            if (value === 1){
                                return "男";
                            }
                            if (value === 2){
                                return "未知";
                            }
                            return "";
                        }},
                    {field: 'birthday', title: '生日', width: 40,align: "center"},
                    // {field: 'createBy', title: '创建人', width: 100},
                    {field: 'createDate', title: '创建时间', width: 80, sortable: true, align: "center"},
                    // {field: 'updateBy', title: '更新人', width: 100},
                    {field: 'updateDate', title: '更新时间', width: 80, sortable: true, align: "center"},
                ]],
                toolbar: '#toolbar'
            });


        })

        /**
         * 刷新左侧机构树
         */
        function reFresh() {
            $('#left_org_tree').tree('reload');
        }

        /**
         * 搜索方法
         */
        function doSearch() {
            $('#datagrid').datagrid('load', {
                name: $('#name').val(),
                loginName: $('#loginName').val()
            });
        }

        /**
         * 清除搜索表单
         */
        function clearForm() {
            $("#searchForm").form("reset");
        }

        /**
         * 添加菜单
         */
        function add() {
            $('#form').dialog({
                title: '添加',
                width: 550,
                height: 600,
                cache: false,
                href: ctx + 'sys/user/form',
                modal: true
            });
        }

        /**
         * 修改
         */
        function edit() {
            var selected = $('#datagrid').datagrid('getChecked');
            if (selected.length !== 1) {
                $.messager.alert('提示', '请选择一条数据!', 'info');
                return;
            }
            $('#form').dialog({
                title: '修改',
                width: 550,
                height: 600,
                cache: false,
                href: ctx + 'sys/user/form?id=' + selected[0].id,
                modal: true
            });
        }

        /**
         * 删除
         */
        function deleteData() {
            var selected = $('#datagrid').datagrid('getChecked');
            if (selected.length == 0) {
                return;
            }
            var names = "";
            var ids = "";
            for (var i = 0; i < selected.length; i++) {
                //名称字符串，用于提示
                names += selected[i].name + ",";
                //id字符串，传到后台
                ids += selected[i].id + ",";
            }
            $.messager.confirm("确认", "确定要删除[ " + names + " ]吗？", function (r) {
                if (r) {
                    var url = ctx + '/sys/user/delete';
                    $.post(url, {ids: ids}, function (result) {
                        $.messager.alert('提示', result.msg, 'info');
                        if (result.code == 0) {
                            //删除datagrid的选中状态，否则上次操作的缓存会存在
                            $("#datagrid").datagrid('clearSelections');
                            //刷新列表
                            $("#datagrid").datagrid("reload");
                        }
                    })
                }
            });
        }

        /**
         * 重置用户密码
         * @param id
         */
        function resetPassword(id) {
            var selected = $('#datagrid').datagrid('getChecked');
            if (selected.length !== 1) {
                $.messager.alert('提示', '请选择一条数据!', 'info');
                return;
            }
            $.messager.confirm('确认', '确定要重置['+selected[0].name+']的密码吗?', function(r){
                if (r){
                    $.post(ctx + '/sys/user/resetPassword',{id:selected[0].id},function (data) {
                        if(data.code === 0){
                            $.messager.show({
                                title:'消息',
                                msg:'重置密码成功',
                                timeout:5000,
                                showType:'null'
                            });
                        }else {
                            $.messager.alert('警告', data.msg, 'warn');
                        }
                    });
                }
            });

        }
    </script>
</head>
<body class="easyui-layout">
<!-- 左侧机构树 -->
<div id="left_org_tree" data-options="region:'west',title:'<a href=\'#\' onclick=\'reFresh();\'>机构</>',split:true" style="width:200px;">
</div>

<!--中部区域-->
<div data-options="region:'center',title:'机构列表'">
    <div id="toolbar">
        <form action="" id="searchForm">
            <input class="easyui-textbox" id="name" name="name" data-options="label:'名称:',labelAlign:'right'"
                   style="width:25%;"/>
            <input class="easyui-textbox" id="loginName" name="loginName" data-options="label:'登录名:',labelAlign:'right'"
                   style="width:25%;"/>
            <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search" onclick="doSearch()">搜索</a>
            <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-clear"onclick="clearForm()">清除</a>
        </form>

        <br>
        <a href="#" class="easyui-linkbutton" onclick="add()" iconCls="icon-add" plain="true">新增</a>
        <a href="#" class="easyui-linkbutton" onclick="edit()" iconCls="icon-edit" plain="true">修改</a>
        <a href="#" class="easyui-linkbutton" onclick="deleteData()" iconCls="icon-remove" plain="true">删除</a>
        <a href="#" class="easyui-linkbutton" onclick="resetPassword()" iconCls="icon-remove" plain="true">重置密码</a>
    </div>
    <table id="datagrid"></table>
    <div id="form"></div>
</div>
</body>
</html>